<template>
    <div v-if="$slots.default && active" class="mt-4">
        <slot :active="active" />
    </div>
</template>
    
<script setup lang='ts'>
const $props = defineProps<{
    title: string,
    active?: boolean,
}>()
const active = computed(() => tabs.currentTab.value == $props.title)
const tabs = inject<any>('tabs')!;

tabs.add($props.title)
$props.active && tabs.setActive($props.title);

</script>
    
<style></style>